import React, { useState, useImperativeHandle } from 'react';
import { Button, Space, Divider } from 'antd';

const SonFun = (props, ref) => {

    const [mycount, setMycount] = useState(0)

    useImperativeHandle(ref, () => ({
        handerSonFun: handerSonFunAdd,
        handerSonFunSubtract: handerSonFunSubtract
    }))

    const handerSonFunAdd = () => {
        let newCount = mycount
        setMycount(++newCount)
    }
    const handerSonFunSubtract = () => {
        let newCount = mycount
        setMycount(--newCount)
    }

    return (
        <>
            <h3>子方法：</h3>
            <Space wrap>
                <Button type="primary" onClick={handerSonFunAdd} >count+</Button>
                count:{mycount}
                <Button type="primary" onClick={handerSonFunSubtract} >count-</Button>
            </Space>
            <Divider orientation="left" plain>
                显示父方法里的参数
            </Divider>
            <h4>key1：{props.nodeData.key1}</h4>
            <h4>key2：{props.nodeData.key2}</h4>
        </>
    )
}

export default React.forwardRef(SonFun);